<template>
  <!-- 公告区域（水平布局） -->
  <div class="notice">
    <div class="itemNo">
      <transition name="staggered-fade" appear>
        <div class="notice-content">
          <svg-load name="mengbanzu12" class="noticeImg" />
          <van-notice-bar class="currentNotice" :text="currentNotice" />
        </div>
      </transition>
    </div>
  </div>

  <!-- 主功能菜单（垂直居中布局） -->
  <div :class="DIFF_HOME_BANNER.includes(_getConfig('_APP_ENV')) ? 'main mainEbc' : 'main'">
    <div 
      v-for="(item, index) in menuList" 
      :key="item.img" 
      class="item" 
      @click="routeLink(item.linkUrl, item.flag)"
    >
      <transition
        name="staggered-fade"
        appear
        @before-enter="beforeElementEnter"
        @enter="elementEnter"
        @after-enter="afterElementEnter"
      >
        <div class="menu-item-content" :data-index="index + 1">
          <div class="icon-container">
            <image-load 
              :filePath="`dark/grid/${item.key}.png`" 
              :name="item.img" 
              class="itemImg"
            />
          </div>
          <div class="text-container">
            <div class="itemName text-ellipsis2">
              {{ _t18(`${item.key}`, ['robinhood2']) }}
            </div>
          </div>
        </div>
      </transition>
    </div>
  </div>

  <!-- 底部操作区（保持原有结构） -->
  <!-- <div class="linkList">
    <div class="linkLeft">
      <div class="item" @click="toRecharge">
        <transition name="staggered-fade" appear>
          <div class="operation-item" data-index="9">
            <div class="icon-container">
              <image-load :filePath="`/dark/recharge.png`" class="leftImg"/>
            </div>
            <div class="text-container">
              <div class="top">{{ _t18(`home_recharge`, ['latcoin']) }}</div>
            </div>
            <image-load 
              :filePath="`/dark/next.png`"
              class="quick-trade-item-img2"
            />
          </div>
        </transition>
      </div>

      <div class="item rightItem" @click="$router.push('/withdraw')">
        <transition name="staggered-fade" appear>
          <div class="operation-item" data-index="10">
            <div class="icon-container">
              <image-load :filePath="`/dark/withdraw.png`" class="leftImg"/>
            </div>
            <div class="text-container">
              <div class="top">{{ _t18(`quick_withdrawal`) }}</div>
            </div>
            <image-load 
              :filePath="`/dark/next.png`"
              class="quick-trade-item-img2"
            />
          </div>
        </transition>
      </div>
    </div>

    <div class="linkRight" @click="dispatchCustomEvent('event_serviceChange')">
      <transition name="staggered-fade" appear>
        <div class="service-item" data-index="11">
          <div class="icon-container">
            <svg-load name="zu447" class="itemImg"/>
          </div>
          <div class="text-container">
            <div class="service-text">{{ _t18(`home_service`) }}</div>
          </div>
        </div>
      </transition>
    </div>

    <InfoPopup :show="showInfoPopup" :data="infoData" @closeBtn="closeBtn"/>
    <van-popup v-model:show="showNotice" round closeable>
      <div class="showNoticeContent">
        <p class="showNoticeContent_title fw-bold">
          {{ showNoticeContent?.noticeTitle || '' }}
        </p>
        <div class="showNoticeContent_content">
          <image-load v-if="showNoticeContent?.imgUrl" :filePath="showNoticeContent?.imgUrl"/>
        </div>
      </div>
    </van-popup>
  </div> -->

  <Coinlist/>
</template>

<script setup>
import { DIFF_RECHARGE_COSTORM, DIFF_HOME_BANNER } from '@/config/index'
import { publiceNotice } from '@/api/common/index'
import { onMounted, computed, onUnmounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useMainStore } from '@/store/index.js'
import { useUserStore } from '@/store/user/index'
import { getInfo } from '@/api/info.js'
import { noticeList } from '@/api/common/index'
import { _t18, _toView, _getConfig } from '@/utils/public'
import InfoPopup from '@/views/home/components/InfoPopup.vue'
import { dispatchCustomEvent } from '@/utils'
import Coinlist from './coinlist.vue'
import gsap from 'gsap'

// 业务逻辑（完整保留）
const mainStore = useMainStore()
const userStore = useUserStore()
const tokenStatus = ref(userStore.isSign)
const $router = useRouter()

const menuList = computed(() => mainStore.getJinGangList.filter(item => item.isOpen))
const currentNotice = ref('')
const showInfoPopup = ref(false)
const infoData = ref([])
const showNotice = ref(false)
const showNoticeContent = ref({})

const routeLink = (link) => {
  if (link === 'live' && showNoticeContent.value) {
    getOpenPopupContent()
  } else if (link === '/trade') {
    mainStore.setTradeStatus(0)
    $router.push(link)
  } else {
    link.includes('http') ? location.href = link : $router.push(link)
  }
}

const closeBtn = () => showInfoPopup.value = false
const event_userInfoChange = () => getInfoList()

const getInfoList = async () => {
  if (tokenStatus.value) {
    const res = await getInfo()
    if (res.code === '200' && res.rows?.length) {
      infoData.value = res.rows
      showInfoPopup.value = true
    }
  }
}

const getOpenPopupContent = async () => {
  const res = await publiceNotice('POP_UPS_NOTICE', 'DEFI_POP_UPS_NOTICE')
  if (res.code === '200' && res.data?.length) {
    showNotice.value = true
    showNoticeContent.value = res.data[0]
  }
}

onMounted(async () => {
  try {
    const res = await noticeList('ROLL_NOTICE')
    if (res.code === 200 && res.data?.[0]?.status === '0') {
      currentNotice.value = res.data[0].noticeContent
    }
  } catch (e) {
    console.error('公告加载失败:', e)
  }
  document.addEventListener('event_userInfoChange', event_userInfoChange)
  getInfoList()
})

onUnmounted(() => {
  document.removeEventListener('event_userInfoChange', event_userInfoChange)
  gsap.globalTimeline.clear()
})

const toRecharge = () => {
  DIFF_RECHARGE_COSTORM.includes(__config._APP_ENV) 
    ? (tokenStatus.value ? dispatchCustomEvent('event_serviceChange') : _toView('/sign-in'))
    : _toView('/recharge')
}

// 动画逻辑（完整保留）
const animatedElements = new Set()

const beforeElementEnter = (el) => {
  const index = parseInt(el.dataset.index, 10)
  gsap.set(el, {
    opacity: 0,
    y: 30,
    scale: 0.95,
    filter: 'blur(2px)'
  })
  gsap.set(el.querySelectorAll('*'), { opacity: 0, y: 15 })
  animatedElements.add(el)
}

const elementEnter = (el, done) => {
  const index = parseInt(el.dataset.index, 10)
  const children = el.querySelectorAll('*')
  
  const tl = gsap.timeline({
    onComplete: done,
    defaults: { duration: 0.8, ease: "power4.out" }
  })

  tl.to(el, {
    opacity: 1,
    y: 0,
    scale: 1,
    filter: 'blur(0px)',
    delay: index * 0.08
  }).to(children, {
    opacity: 1,
    y: 0,
    stagger: 0.05
  }, "<+=0.1")
}

const afterElementEnter = (el) => {
  gsap.set(el, { clearProps: "all" })
  el.querySelectorAll('*').forEach(child => gsap.set(child, { clearProps: "all" }))
  animatedElements.delete(el)
}
</script>

<style lang="scss" scoped>


/* 公告栏样式（水平布局） */
.notice {
  padding: 0 15px;
  .itemNo {
    display: flex;
    height: 35px;
    align-items: center;
    background: var(--ex-home-notice-bgcolor);
    border-radius: 20px;
    
    .notice-content {
      display: flex;
      align-items: center;
      width: 100%;
      
      .noticeImg {
        margin-left: 15px;
        width: 20px;
        height: 20px;
        flex-shrink: 0;
      }
      
      .currentNotice {
        flex: 1;
        font-size: 14px;
        color: var(--ex-home-notice-color);
        background: var(--ex-home-notice-bgcolor);
      }
    }
  }
}

/* 主功能菜单（垂直居中） */
.main {
  padding: 10px 0 0;
  display: flex;
  flex-wrap: wrap;
  
  .item {
    width: 25%;
    margin-bottom: 20px;
    
    .menu-item-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      
      .icon-container {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-bottom: 8px;
        
        .itemImg {
          width: 54px;
          height: 54px;
        }
      }
      
      .text-container {
        width: 100%;
        text-align: center;
        
        .itemName {
          font-size: 14px;
          color: var(--ex-default-font-color);
          line-height: 1.3;
          max-width: 76px;
          margin: 0 auto;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
      }
    }
  }
}

/* 底部操作区（保持原有结构） */
.linkList {
  padding: 20px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  .linkLeft {
    flex: 1;
    min-height: 65px;
    display: flex;
    
    .item {
      flex: 1;
      padding: 10px 12px;
      border-radius: .266667rem;
      background-color: #252a4d;
      position: relative;
      
      .operation-item {
        display: flex;
        align-items: center;
        
        .icon-container {
          .leftImg {
            width: 45px;
            height: 45px;
            margin-right: 10px;
          }
        }
        
        .text-container {
          .top {
            font-size: 14px;
            color: var(--ex-default-font-color);
          }
        }
        
        .quick-trade-item-img2 {
          width: .586667rem;
          height: .586667rem;
          position: absolute;
          right: 0;
          top: 0;
        }
      }
    }
    
    .rightItem {
      margin-left: 14px;
    }
  }
  
  .linkRight {
    max-width: 50px;
    margin-left: 10px;
    
    .service-item {
      .icon-container {
        margin-left: 13px;
        .itemImg {
          width: 22px;
          height: 22px;
          margin-bottom: 5px;
        }
      }
      
      .service-text {
        font-size: 12px;
        transform: scale(0.8);
        white-space: nowrap;
      }
    }
  }
}

/* 弹窗样式 */
.showNoticeContent {
  min-width: 300px;
  text-align: center;
  
  .showNoticeContent_title {
    font-size: 18px;
    padding: 15px 0;
    border-bottom: 1px solid #e1e1e1;
  }
  
  .showNoticeContent_content {
    padding: 20px 15px 30px;
    max-height: 400px;
  }
}

/* 动画样式 */
.staggered-fade-enter-active {
  transition: opacity 0.8s ease-out;
}
.staggered-fade-enter-from {
  opacity: 0;
}
</style>
